<template>
    <div :class="['button-container', disabled ? 'disabled' : 'default']" @click="changeButton">
        {{ textValue }}
    </div>
</template>

<script setup lang="ts">
import { is } from "@babel/types";
import { ref, reactive, toRefs, computed } from "vue"
const emit = defineEmits(["change"])
const disabled = ref(false)
const countValue = ref<any>(60);
let timeFun: any;
const props = defineProps({
    count: {
        type: Number,
        default: 60
    },
    //是否是倒计时按钮
    isDown: {
        type: Boolean,
        default: false
    },
    //按钮文本
    text: {
        type: String,
        default: ''
    },
    onClick: {
        type: Function,
        default: () => { }
    }
})
const textValue = computed(() => {
    if (props.isDown) {
        if (disabled.value) {
            return countValue.value
        } else {
            return props.text
        }
    } else {
        return props.text
    }
})
function changeButton() {
    if (props.isDown) {
        if (!disabled.value) {
            startCount()
            emit('change')
        }
    } else {
        emit('change')
    }
}
function startCount() {
    disabled.value = true
    for (let i = 0; i <= props.count; i++) {
        timeFun = setTimeout(() => {
            countValue.value = `${props.count - i} S`;
            if ((props.count - i) == 0) {
                disabled.value = false;
                countValue.value = props.text
            }
        }, i * 1000);
    }
}

</script>

<style lang="less" scoped>
.button-container {
    width: 170px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 5px;
    color: #000;
}

.default {
    background-color: var(--main);
}

.disabled {
    filter: grayscale(100%);
    background-color: #c4c4c4;
}
</style>
